<template>
  <div class="login-main">
    <!-- 切换语言 -->
    <div class="change-language"></div>
    <!-- 面板区域 -->
    <div class="login-panel">
      <header>
        <img class="logo" :src="logo" alt="" />
        <h1>SL-Admin</h1>
        <h2>{{ title }}</h2>
      </header>
      <div>
        <!-- 组件切换 -->
        <transition name="fade-slide" mode="out-in">
          <component
            :is="formComponents[componentName]"
            v-model="componentName"
          />
        </transition>
      </div>
    </div>
    <!-- 登录页底部版权 -->
    <el-text size="small" class="py-2.5! fixed bottom-0 text-center">
      Copyright © 2021 - 2025 youlai.tech All Rights Reserved.
      <a href="http://beian.miit.gov.cn/" target="_blank"
        >皖ICP备20006496号-2</a
      >
    </el-text>
  </div>
</template>

<script setup lang="ts">
type LayoutMap = "login" | "register" | "resetPwd";
import logo from "@/assets/images/logo.png";
const componentName = ref<LayoutMap>("login"); // 切换显示的组件
const title = computed(() => {
  switch (componentName.value) {
    case "login":
      return "登录";
    case "register":
      return "注册";
    case "resetPwd":
      return "重置密码";
  }
});
const formComponents = {
  login: defineAsyncComponent(() => import("./components/Login.vue")),
  register: defineAsyncComponent(() => import("./components/Register.vue")),
  resetPwd: defineAsyncComponent(() => import("./components/ResetPwd.vue")),
};
</script>

<style lang="scss" scoped>
.login-main {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}
.login-panel {
  width: 450px;
  height: 680px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  padding: 40px;
  border-radius: 10px;
  flex-direction: column;
  display: flex;
  align-items: center;

  header {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  ::v-deep {
    .el-button {
      width: 100%;
    }
    .blur-tips {
      color: rgb(64, 128, 255);
      cursor: pointer;
    }
    footer {
      margin-top: 20px;
    }
    main {
      margin-top: 30px;
    }
  }

  .logo {
    width: 80px;
  }
}
/* fade-slide */
.fade-slide-leave-active,
.fade-slide-enter-active {
  transition: all 0.3s;
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
